<template>
  <div class="detail-title">
    <span :class="{ active: tabIndex == 0 }" @click="tab(0)">商品介绍</span>
    <span :class="{ active: tabIndex == 1 }" @click="tab(1)">商品评价</span>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props,{emit}) {
    const tabIndex = ref(0);
    const tab = (val) => {
      tabIndex.value = val;
      emit('childTab',val);
    };
    return {
      tabIndex,
      tab,
    };
  },
};
</script>
<style lang="scss" scoped>
.detail-title {
  background: #fff;
  margin-top: 10px;
  display: flex;
  span {
    width: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
  }
  .active {
    border-bottom: 2px solid red;
  }
}
</style>